{# 眼镜试戴页面 #}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D tryon</title>
  <style>
    *    { margin: 0; padding: 0; box-sizing: border-box; }
    html { width: 100%; height: 100%; }

    #title {
      text-align: center;
      color: grey;
      padding: .5rem 0;
    }

    #web_cam    { display: none }

    .tryon-stage {
      margin: auto;
      width: 640px;
      height: 480px;
      position: relative;
    }
    #img_stream { height: 100%;width: 100% }
    #t3d_cvs { position: absolute;left: 0;top: 0;}

    .glass-list {
      padding-top: 1rem;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      list-style: none;
      margin: auto;
      width: 640px;
    }
    .glass__item {
      width: 22%;
      display: inline-flex;
      height: 8rem;
      margin: auto;
      overflow: hidden;
      border-radius: 10px;
    }
    .glass__item img {
      width: 100%;
      pointer-events: none;
    }
  </style>
</head>
<body>
<h2 id="title">3D 试戴</h2>

<div id="tryon_stage" class="tryon-stage" ></div>

<ul class="glass-list" onclick="clickChangeGlass()">
  <li class="glass__item" data-idx="-1">
    <img src="https://gz.bcebos.com/v1/try-on-api/mp_sdk_dev/exhibit_asset/cencel.png" alt="" class="glass__img">
  </li>
  {% for model in models %}
    <li class="glass__item" data-idx="{{ loop.index0 }}">
      <img src="{{ helper.image_resize(model.preview) }}" alt="{{ model.code }}" title="alt="{{ model.code }}"" class="glass__img">
    </li>
  {% endfor %}
</ul>

<!--<script src="js/libs/t3d/three.r90.js"></script>-->
<script src="https://tryon.xiaojingxiuxiu.com/lib/three.r90.min.js"></script>

<script src="https://tryon.xiaojingxiuxiu.com/lib/gl-tryon.min.js"></script>


<script>
  {% set first_glass = models|first %}
  var first_glass = "{{ first_glass.name }}";
  var sdk_ready = false;
  var first_loaded = false;
  var glasses = {{ models|json_encode }};

  var pkxTryOn = new GLTryOn({
    stage: "#tryon_stage" ,

    size: {
      width: 640,
      height: 480
    },

    glasses: glasses
  });

  pkxTryOn
    .on("ready", function () {
      console.info("gl tryon ready!");
      sdk_ready = true;
      onReady();
    })
    .on("error", function (error_type, error_msg) {
      console.info(error_type, error_msg);
      alert(error_type + ':' + error_msg);
    })
    .on("glass-loaded", function (glass) {
      if (glass.name === first_glass) {
        first_loaded = true;
        onReady();
      }
      console.info(glass.name + " loaded");
    });

  function onReady() {
    if (sdk_ready && first_loaded) {
      pkxTryOn.changeGlass(first_glass)
    }
  }

  function clickChangeGlass() {
    if (event.target.nodeName.toUpperCase() !== "LI") return false;

    var show_idx = parseInt(event.target.dataset.idx);
    if (show_idx === -1) return pkxTryOn.hideGlass();

    pkxTryOn.changeGlass(glasses[show_idx]['name']);
  }

  /**
   * @return {string}
   */
  function assetRoot() {
    return location.host === "tryon.xiaojingxiuxiu.com"
      ? "https://gz.bcebos.com/v1/try-on-api/gl-glass-tryon/"
      : "";
  }
</script>
</body>
</html>